<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="首页"></Base-Navbar>

    <div class="container">
      <!-- 搜索栏 -->
      <div class="mb-10">
        <van-search
          readonly
          placeholder="请输入你要搜索的商品"
          @click="router.push('/search/index')"
        ></van-search>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab v-model:index="tabIndex" v-model:value="tabValue"></Base-Tab>
      </div>

      <!-- 分类 -->
      <div class="flex flex-ct">
        <ul class="classify-list flex-fs-0 mr-10">
          <li
            class="title click"
            :class="i === classifyIndex ? 'active' : ''"
            v-for="(v, i) in classifys"
            :key="i"
            @click="classifyIndex = i"
          >
            {{ v.name }}
          </li>
        </ul>

        <ul class="children-list flex flex-wrap flex-1 box opacity pt-15">
          <li
            class="box flex flex-center ta-center click"
            v-for="(v, i) in classifys[classifyIndex]?.childlist"
            :key="i"
            @click="
              router.push(
                `/classify/detail?tabIndex=${tabIndex}&tabValue=${tabValue}&categoryValue=${v.id}`
              )
            "
          >
            {{ v.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

const router = useRouter()

const classifys = ref([])
const classifyIndex = ref(0)

const tabIndex = ref(0)
const tabValue = ref('')

getClassifyList()

// 获取分类列表
async function getClassifyList() {
  const { code, data } = await api.getClassifyList()

  if (code === 1) {
    classifys.value = data
  }
}

// 获取产品列表
async function getProductList() {
  const params = {
    page: 1,
    pageNum: 10000,
    keyword: keyword.value,
    delivery: tabValue.value,
  }

  const { code, data } = await api.getProductList(params)

  if (code === 1) {
    products.value = data.data
  }
}
</script>

<style lang="scss" scoped>
.classify-list {
  li {
    position: relative;
    height: 40px;
    line-height: 40px;

    &.active {
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-black);
        transform: translateX(-50%);
      }
    }
  }
}

.children-list {
  li {
    width: calc(100% / 3 - 3.5px);
    height: 70px;
    padding: 0;
    margin-bottom: 5px;

    &:nth-child(3n - 1) {
      margin: 0 5px;
    }
  }
}
</style>
